﻿<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="/Content/css/layout.css" rel="stylesheet" />
    <link href="/Scripts/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" />
    <script src="/Scripts/jquery-1.12.1.min.js"></script>
    <script src="/Scripts/bootstrap-3.3.5-dist/js/modal.js"></script>
    <style>
        .map {
            width: 1500px;
            height: 1080px;
            background: url(/Content/images/map1.png) no-repeat center;
            background-size: contain;
        }

        .location {
            color: #fff;
            position: absolute;
            top: 100px;
            left: 100px;
        }

            .location:before {
                content: "";
                width: 25px;
                height: 40px;
                display: block;
                margin: auto;
                margin-bottom: 10px;
                background: url(/Content/images/location.png) no-repeat center;
                background-size: contain;
            }

            .location:after {
                content: "";
                position: absolute;
                top: 40px;
                left: 0;
                right: 0;
                margin: auto;
                width: 25px;
                height: 7px;
                border-radius: 100%;
                background: url(/Content/images/location-shadow.png) no-repeat center;
                background-size: contain;
            }

            .location span.t {
                position: relative;
                top: -75px;
            }

            .location span.lt {
                position: relative;
                left: -50px;
                top: -45px;
            }

            .location span.br {
                position: relative;
                right: -31px;
                bottom: 7px;
            }
    </style>
</head>
<body>
    <div class="map central" id="map">
        <a href="javascript:;" class="location" data-id='BB14256A-689A-40DF-83E1-2B1E06674E2B' style="top: 495px; left: 603px;"><span class="br">SHANGHAI</span></a>
        <a href="javascript:;" class="location" data-id='B2E7787B-65F9-4BC5-B6F1-C77F2CA84E27' style="top: 390px; left: 185px;">LUXEMBOURG</a>
        <a href="javascript:;" class="location" data-id='8A59F5E5-E891-495C-85E3-B7F9C6800FCD' style="top: 510px; left: 487px;"><span class="t">INDIA</span></a>
        <a href="javascript:;" class="location" data-id='FA3B06A4-6E60-47C4-83B7-DF4BDDAE76C5' style="top: 522px; left: 437px;"><span class="lt">INDIA JV</span></a>
        <a href="javascript:;" class="location" data-id='E36C88A5-1E2C-4311-B177-A0404DB0AA43' style="top: 752px; left: 655px;">MELBOURNE, AUSTRALIA</a>
        <a href="javascript:;" class="location" data-id='7F5F1BAE-47F9-4D6F-88D1-D2D71094448D' style="top: 442px; left: 605px;"><span class="t">YANTAI</span></a>
        <a href="javascript:;" class="location" data-id='DDF72265-6E8E-44C0-9B55-C96C51DB7452' style="top: 500px; left: 535px;">CHONGQING JV</a>
        <a href="javascript:;" class="location" data-id='8D461A1E-D84F-4A95-A6C4-EF7A935893C9' style="top: 467px; left: 635px;">KOREA JV</a>
        <a href="javascript:;" class="location" data-id='B74FD185-0229-4306-A7F2-1ACAD86CE07A' style="top: 255px; left: 565px;">RUSSIA  - TBD</a>
        <a href="javascript:;" class="location" data-id='44DFA25E-FCEE-4F24-B592-B13C869D8FA2' style="top: 453px; left: 1180px;">MICHIGAN, USA</a>
        <a href="javascript:;" class="location" data-id='AD36BDE9-92DA-4380-86CB-BCFF87575104' style="top: 510px; left: 1078px;">MONTERREY, Mexico</a>
        <a href="javascript:;" class="location" data-id='079254F3-AD0E-4FF8-AFFC-4D441D3EE436' style="top: 595px; left: 1245px;">VENEZUELA</a>
        <a href="javascript:;" class="location" data-id='57B5F800-8BE8-49F2-AAB7-BAA49F48D8DA' style="top: 670px; left: 1280px;">BRAZIL – TBD</a>
    </div>
    <div class="modal-container">
        <div class="modal-wrapper">
            <div class="modal-content"></div>
        </div>
    </div>
    <nav>
        <a href="Index.html" class="home"></a>
        <a href="Index.html" class="back"></a>
        <a href="" class="refresh"></a>
    </nav>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="width: 1000px; height:565px; margin-top: 10%; margin-left:23%; border: 3px solid #171717; background:rgba(255,255,255,.8) ">
                <div class="modal-body">
                    <div class="news-html">
                        <div class="n-header" style="width:100%; height:50px;">
                            <span id="n-title" style="font-size:37px; font-weight:bold; margin-left:53px;"></span>
                            <img style="float:right;" src="/Content/images/close.png" onclick="$('#myModal').modal('hide');" />
                        </div>
                        <div class="n-content" style="height:500px; margin-top:20px;">
                            <div class="cover" style="text-align:center;">
                                <img id="n-cover" style="height:400px; width:90%;" />
                            </div>
                            <!--<div class="n-text" id="n-text" style="padding-top:25px;"></div>-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $('#map a').click(function () {
            var ID = $(this).attr('data-id');

            $.ajax({
                url: '/api/CommonApi?API=Corey_GetNews',
                type: 'get',
                data: { ID: ID },
                dataType: 'json',
                success: function (data) {
                    if (data.Success) {
                        var ApiParamObj = data.ApiParamObj;
                        $('#n-title').html(ApiParamObj.Title);
                        $('#n-cover').attr('src', ApiParamObj.CoverURL);
                        $('#n-text').html(ApiParamObj.HTML);
                        $('#myModal').modal();
                    }
                }
            });

        });
    </script>
</body>
</html>